<template>
  <!-- 分页条 -->
  <el-pagination
    v-model:current-page="paginationData.pageNum"
    v-model:page-size="paginationData.pageSize"
    :page-sizes="[3, 5, 10, 15, 100]"
    layout="jumper, total, sizes, prev, pager, next"
    background
    :total="props.total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    style="margin-top: 20px; justify-content: flex-end"
  />
</template>

<script setup>
import {
  ref,
  reactive,
  defineProps,
  defineEmits,
  computed,
  watchEffect,
  onMounted
} from 'vue'

// 定义接收父级传递的 props
const props = defineProps({
  total: Number,
  allData: Array
})
// 定义 emit 事件
const emit = defineEmits(['update:Data'])

const allEmployeesProp = ref([])
// const totals = ref(0)
watchEffect(() => {
  // 在 props.total 或 props.allEmployees 变化时被调用
  allEmployeesProp.value = props.allData
  //   console.log(allEmployeesProp.value, 'allEmployeesProp.value')
})

//分页数据
const paginationData = reactive({
  pageNum: 1,
  pageSize: 5
})
//点击分页
const handleSizeChange = (val) => {
  paginationData.pageSize = val
  emit('update:Data', pagedData)
}

//点击当前页
const handleCurrentChange = (val) => {
  paginationData.pageNum = val
  emit('update:Data', pagedData)
}
onMounted(() => {
  if (paginationData.pageNum === 1) {
    emit('update:Data', pagedData)
  }
})

//  分页实现--用于计算当前页的员工数据
const pagedData = computed(() => {
  const start = (paginationData.pageNum - 1) * paginationData.pageSize
  const end = start + paginationData.pageSize
  return allEmployeesProp.value.slice(start, end)
})
</script>

<style scoped>
.el-pagination{
  width: 100%;
}
</style>